<template>
    <div class="loan-in-want">
        <div class="wrapper">
            <ul class="form-box">
                <li class="form__item">
                    <span class="form__key">借款金额</span>
                    <div class="form__value">
                        <input type="text" placeholder="(元)">
                    </div>
                </li>
            </ul>
            <!-- 我的借条 -->
            <h1 class="explain">您当前的贷款额度为20000元</h1>

            <ul class="form-box">
                <li class="form__item detail">
                    <span class="form__key">借款用途及说明</span>
                    <i class="iconfont icon-arrow"></i>
                </li>
            </ul>
            
            <ul class="form-box">
                <li class="form__item detail">
                    <span class="form__key">借款用途</span>
                    <div class="form__value">
                        <input type="text" placeholder="(2～365天)">
                    </div>
                </li>
                <li class="form__item select">
                    <span class="form__key">还款方式</span>
                    <div class="form__value">
                        <picker-list picker-id='payway' :list='payways' v-model='payway'></picker-list>
                    </div>
                </li>
                <li class="form__item select">
                    <span class="form__key">年化利率</span>
                    <div class="form__value">
                        <picker-list picker-id='rate' :list='payways' v-model='payway'></picker-list>
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">服务费</span>
                    <div class="form__value">
                        <input type="text" placeholder="(元)">
                    </div>
                </li>
            </ul>

            <div class="card money-info">
                <div class="money-info__header">
                    <div class="money-info__box">
                        <h1 class="money-info__title">实际到账金额</h1>
                        <p class="money-info__item">
                            <span class="money-info__key">借款金额</span>
                            <span class="money-info__value">300.00</span>
                        </p>
                        <p class="money-info__item">
                            <span class="money-info__key">服务费</span>
                            <span class="money-info__value">-2.00</span>
                        </p>
                        <p class="money-info__item">
                            <span class="money-info__key">手续费</span>
                            <span class="money-info__value">-3.00</span>
                        </p>
                        <p class="money-info__number">295元</p>
                    </div>
                    <div class="money-info__box">
                        <h1 class="money-info__title">预计还款本息</h1>
                        <p class="money-info__item">
                            <span class="money-info__key">借款金额</span>
                            <span class="money-info__value">300.00</span>
                        </p>
                        <p class="money-info__item">
                            <span class="money-info__key">服务费</span>
                            <span class="money-info__value">-2.00</span>
                        </p>
                        <p class="money-info__item">
                            <span class="money-info__key">手续费</span>
                            <span class="money-info__value">-3.00</span>
                        </p>
                        <p class="money-info__number">295元</p>
                    </div>
                </div>
                <div class="plan">
                    <div class="money-info__box">
                        <h1 class="money-info__title">还款计划</h1>
                        <p class="money-info__item">
                            <span class="money-info__key">借款金额</span>
                            <span class="money-info__value">300.00</span>
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="agreement">
                <check-box v-model='argeement'><span class='agreement__text'>已阅读并同意《有借借款协议》</span></check-box>
                <p></p>
            </div>
            <div class="tips">
                <p>提示</p>
                <p>1. 在平台储备金范围内，支持所有人任何时间立即提现</p>
                <p>2. 如果有借筹满／筹款超过3天／还款时间到期，借款将自动关闭</p>
                <p>3. 当前借款未关闭，不得发布新的借款</p>
            </div>
        </div>
        <div class="footer">
            <span class="button">确定发布</span>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList
        },
        data() {
            return {
                payways:[{
                    value:0,
                    display:'还款方式1'
                },{
                    value:1,
                    display:'还款方式2'
                },{
                    value:2,
                    display:'还款方式3'
                }],
                argeement:true,
                payway:-1,
                payPasswordShow:false,
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                listInfo:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            goDetail(item){
                this.$router.push({
                    name:'user-detail',
                    params:{
                        id:item.userId,
                    }
                })
            },
            getList(num){
                this.loading = true
                allApi.userList(num)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getAccount(){
                this.loading_count = true
                allApi.userCount()
                .then(result=>{
                    this.loading_count = false
                    this.userCount = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading_count = false
                })
            },
        },
        created(){
            document.title = '我要借款'
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .loan-in-want{
        .explain{
            @extend %font-caption;
            padding:8px 24px 0 24px;
            color:$importColor;
        }
        .money-info{
            margin-top:16px;
        }
        .money-info__header{
            display: flex;
        }
        .money-info__title{
            @extend %font-body1;
            color:$importColor;
            padding-bottom: 8px;
            margin-bottom: 8px;
            border-bottom:1px solid $sectionColor;
        }
        .money-info__box{
            width: 100%;
            flex:1;
            &:nth-of-type(2n){
                margin-left:24px;
            }
        }
        .money-info__item{
            @extend %font-caption;
            padding-top: 4px;
            display: flex;
            justify-content:space-between;
        }
        .money-info__number{
            @extend %font-subhead;
            color:$orange;
            padding-top: 4px;
            text-align:right
        }
        .plan{
            padding-top: 16px;
        }
        .agreement{
            padding:16px;
        }
        .agreement__text{
            @extend %font-body1;
            display: block;
            color:$importColor;
        }
        .tips{
            @extend %font-caption;
            color:rgba(#000,.26);
            padding:0 16px 100px 16px;
            line-height: 20px;
        }
        .footer{
            position: absolute;
            bottom:0;
            left:0;
            right:0;
            padding-bottom: 22px;
            padding-top: 14px;
            background-image:linear-gradient(-180deg, rgba(245,245,245,0.00) 0%, #f5f5f5 75%);
        }
    }

</style>
